<template>
	<view style="padding-bottom: 200rpx;">
		<view class="base-info">
			<view class="left-icon"></view>
			本月检查概况
		</view>
		<view class="check-desc">
			<text>本月共检查:<text class="check-desc-color">300</text>处</text>
			<text>其中上报问题:<text class="check-desc-color">40</text>件</text>
		</view>
		<view class="charts-box">
			<qiun-data-charts type="pie" :chartData="pieData" />
		</view>
		<view class="bottom-box">
			<view class="bottom-item">
				<view class="circle"></view>
				<text class="bottom-text">矛盾纠纷</text>
				<text><text class="num num-color1">12</text>件</text>
			</view>
			<view class="bottom-item">
				<view class="circle"></view>
				<text class="bottom-text">交通安全</text>
				<text><text class="num num-color2">8</text>件</text>
			</view>
			<view class="bottom-item">
				<view class="circle"></view>
				<text class="bottom-text">信访维稳</text>
				<text><text class="num num-color3">8</text>件</text>
			</view>
			<view class="bottom-item">
				<view class="circle"></view>
				<text class="bottom-text">治安隐患</text>
				<text><text class="num num-color4">8</text>件</text>
			</view>
			<view class="bottom-item">
				<view class="circle"></view>
				<text class="bottom-text">消防安全</text>
				<text><text class="num num-color5">4</text>件</text>
			</view>
		</view>
		<view class="base-info">
			<view class="left-icon"></view>
			预警提示
		</view>
		 <view class="tip-content">
			 本月矛盾纠纷事件类型较多，数量已至12件，占比38%，请各位注意调节邻里相处关系，共建和谐社区，宜居环境
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pieData: {
					"series": [{
						"name": "状态正常",
						"data": 260
					}, {
						"name": "上报问题",
						"data": 40
					}]
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.base-info {
		font-size: 32rpx;
		color: #333;
		position: relative;
		padding-left: 50rpx;
		font-weight: 600;
		height: 100rpx;
		line-height: 100rpx;

		.left-icon {
			width: 18rpx;
			height: 28rpx;
			position: absolute;
			background-color: #3080FB;
			left: 20rpx;
			top: 36rpx;
		}
	}
	.check-desc {
		display: flex;
		justify-content: space-between;
		padding: 0 50rpx;
		.check-desc-color {
			color: #FFC600;
			margin-left: 20rpx;
			margin-right: 10rpx;
		}
	}
	.charts-box {
		width: 100%;
		height: 300px;
	}
	.tip-content {
		padding: 0 30rpx;
	}
	.bottom-box {
		
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		padding-left: 250rpx;
		color: #717171;
		.bottom-item {
			display: flex;
			align-items: center;
		}
		.bottom-text {
			margin-right: 50rpx;
		}
		.circle {
			width: 14rpx;
			height: 14rpx;
			border-radius: 100%;
			background-color: #36E0FF;
			margin-right: 20rpx;
		}
		.num {
			font-size: 40rpx;
		}
		.num-color1 {
			color: #2DB7F5;
		}
		.num-color2 {
			color: #FFCD37;
		}
		.num-color3 {
			color: #4AD2E7;
		}
		.num-color4 {
			color: #5470C6;
		}
		.num-color5 {
			color: #2DB8C4;
		}
	}
</style>
